<template>
	<view class="index">
		<cus-navbar></cus-navbar>
		<template v-if="isReday">
			<!-- 分享 -->
			<!-- <view class="share flex-center flex-direction" @click="openDialog3" v-if="isShareShow">
				<uni-icons type="redo-filled" size="20" color="#FFFFFF"></uni-icons>
				
				<view class="size-20">{{$t('node19')}}</view>
			</view> -->
			
			
			<view class="tabs flex-center">
				<cus-tabs :nodes="nodes" @change="$event => current = $event"></cus-tabs>
			</view>
			
			<view class="mt-50 flex-center">
				<uni-countdown background-color="#284B4A" :font-size="76" color="#EBFFF9" splitorColor="#FFFFFF"
					:second="timeStemp"></uni-countdown>
			</view>
			
			<view class="progress">
				<image src="../../static/imgs/node0.png" class="img0"></image>
				<view class="progress-card">
					<!-- 招募进度 -->
					<view class="size-28 mb-28">{{$t('node5')}}</view>
					<view class="flex justify-between align-center size-24 text-bold">
						<view class="">{{nodes[current].progress}}%</view>
						<view class="">{{nodes[current].soldNum}}/{{nodes[current].total}}</view>
					</view>
					<view class="mt-14 progress-box">
						<view class="progress-line transition" :style="{width: `${nodes[current].progress}%`}"></view>
					</view>
				</view>
			
				<view class="progress-card1 mt-30">
					<!-- 支付金额 -->
					<view class="size-28">{{$t('node6')}}</view>
					<view class="color-white mt-20">
						<text class="size-56 text-bold">{{initBigNumber(nodes[current].price)}}</text>
						<text class="size-28">USDT</text>
					</view>
				</view>
				
				<template v-if="timeStemp==0 || infos._isIdo || nodes[current].stock==0">
					<!-- 暂无库存 -->
					<view class="join btn-disable" v-if="nodes[current].stock==0">{{$t('node22')}}</view>
					<!-- 已参与 点击参与 -->
					<view class="join btn-disable" v-else>{{infos._userNode && infos._userNode==nodes[current].key?$t('node21'):$t('node22')}}</view>
				</template>
				<template v-else-if="Number(amount.balance) < Number(nodes[current].price)">
					<!-- 余额不足 -->
					<view class="join btn-disable">{{$t('node23')}}</view>
				</template>
				<template v-else>
					<!-- 授权额度充足，点击参与 -->
					<button class="join" v-if="Number(amount.allowance) >= Number(nodes[current].price)" @click="openDialog1">{{$t('node22')}}</button>
					<!-- 授权额度不足，授权 -->
					<button class="join" @click="makeAuth" v-else>{{$t('node24')}}</button>
				</template>
				
			</view>
			
			<view class="bottom">
				<image src="../../static/imgs/node1.png" class="img1"></image>
				<view class="bottom-card">
					<!-- 招募数量 -->
					<view class="size-28 color-white">{{$t('node36')}}</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 个 -->
						<view class="tips">{{current?50:200}}{{$t('node37')}}</view>
					</view>
					<!-- 招募要求 -->
					<view class="size-28 color-white mt-20">{{$t('node7')}}</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 个 -->
						<view class="tips">{{current?5000:2000}}{{$t('node37')}}USDT</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 需要完成分享 -->
						<!-- 个区块地址 -->
						<view class="tips">{{$t('node38')}}{{current?100:50}}{{$t('node39')}}</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 个月考核期 -->
						<view class="tips">6{{$t('node10')}}</view>
					</view>
					<!-- 节点权益 -->
					<view class="size-28 color-white mt-20">{{$t('node11')}}</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- DeFi金融系统体系AFH流水的 -->
						<view class="tips">{{$t('node40')}}{{current?15:8}}%</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<view class="tips">{{current?3:4}}%{{$t('node14')}}</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- AFH交易滑点的 -->
						<!-- 加权分红 -->
						<view class="tips">{{$t('node13')}}{{current?1:1}}%{{$t('node14')}}</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 添加池底分红 -->
						<view class="tips">{{$t('node41')}}</view>
					</view>
					<view class="flex align-center mt-20">
						<view class="circle"></view>
						<!-- 分享获得20%收益 -->
						<view class="tips">{{$t('node42')}}</view>
					</view>
				</view>
			</view>
			<view class="gap-80"></view>
			<!-- 参与招募  确认支付 -->
			<cus-dialog ref="dialog1" :isAddress="isAddress" :title="$t('node25')" :btnTxt="$t('node26')" @confrim="openDialog2">
				<view class="text-center">
					<view class="color-main size-56 text-bold">{{initBigNumber(nodes[current].price)}}</view>
					<!-- 支付金额 -->
					<view class="color-6a size-24 mt-10">{{$t('node27')}}(USDT)</view>
				</view>
				<view class="dialog-line"></view>
				<!-- 邀请人地址 -->
				<view class="color-white size-24 mt-30">{{$t('node28')}}</view>
				<textarea :value="parent_address" v-if="parent_address" disabled :auto-height="true" class="dialog-area mt-20" />
				<!-- 请输入邀请人地址 -->
				<textarea v-model="parentAddress" v-else :auto-height="true" class="dialog-area mt-20" :placeholder="$t('node29')"
					placeholder-class="dialog-place" />
			</cus-dialog>
			<!-- 参与成功 好的 -->
			<cus-dialog ref="dialog2" :title="$t('node30')" :btnTxt="$t('node31')" @confrim="closeDialog2">
				<!-- 恭喜你参与成功 -->
				<view class="color-main size-28 text-center">{{$t('node32')}}</view>
			</cus-dialog>
			<!-- 分享链接 复制 -->
			<cus-dialog ref="dialog3" :title="$t('node33')" :btnTxt="$t('node34')" @confrim="closeDialog3">
				<view class="text-center">
					<!-- 推荐人数： -->
					<view class="color-6a size-24">{{$t('node35')}}{{infos._referralNum}}</view>
				</view>
				<view class="dialog-area word-warp mt-20">{{myInviteUrl}}</view>
			</cus-dialog>
		</template>
		
		
		
		
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import BigNumber from "bignumber.js";
	import { getAddress } from '@/config/storage.js'
	export default {
		data() {
			return {
				current: 0,// 选项卡索引
				parentAddress:'',// 手动填写的父级地址
				
				infos:{},
				meta:{},
				erc20: null,
				ido: null,
				amount: {
					balance:0,// 余额
					allowance:0// 查询的授权额度
				},
				isReday:false,
				myInviteUrl:''
			}
		},
		computed: {
			...mapState({
				parent_address: state => state.user.ref,// 暂存的父级地址
			}),
			// 校验地址是否符合规则
			isAddress(){
				return this.parentAddress === '' || this.ido.web3.utils.isAddress(this.parentAddress)
			},
			// 节点信息
			nodes() {
				let defaultNode = this.infos._nodes[0]
				let superNode = this.infos._nodes[1]
				if (defaultNode && superNode) {
					let defaultSold = defaultNode.total - defaultNode.stock
					let superSold = superNode.total - superNode.stock
					return [{
							name: this.$t('node3'),// 普通节点
							soldNum: defaultSold,// 计算出的已售数量
							progress: Math.floor(defaultSold / defaultNode.total * 1000) / 10,// 计算出的进度百分比
							...defaultNode
						},
						{
							name: this.$t('node4'),// 超级节点
							soldNum: superSold,
							progress: Math.floor(superSold / superNode.total * 1000) / 10,
							...superNode
						}
					]
				}
			},
			// 倒计时
			timeStemp() {
				let now = new Date().getTime()
				now = Math.floor(now / 1000)
				let end = this.infos._endTime
				let num = end - now
				if (num > 0) return num
				else return 0
			},
			// 是否能分享
			isShareShow(){
				let parent = this.infos._parent
				return !parent.endsWith('000000')
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.$dapp.ido.init().then(ido => {
					this.ido = ido
					this.meta = ido.meta
					Promise.all([
						ido.infos(),
						ido.usdt()
					]).then(res=>{
						console.log(res);
						this.infos = res[0]
						this.isReday = true
						this.initErc(res[1])
					})
				})
			},
			initErc(data){
				this.$dapp.erc20.init(data).then(erc20=>{
					this.erc20 = erc20
					Promise.all([
						erc20.balanceOf(getAddress()),
						erc20.allowance(null, this.meta._address)
					]).then(res=>{
						console.log(res);
						this.amount.balance = res[0]
						this.amount.allowance = res[1]
					})
				})
			},
			
			// 打开参与弹窗
			openDialog1() {
				this.$refs.dialog1.open()
			},
			// 确定支付参与
			openDialog2() {
				uni.showLoading()
				// 关闭参与弹窗
				this.$refs.dialog1.close()
				let parent = this.parent_address ? this.parent_address : this.parentAddress
				this.ido.invest(this.current, parent||this.infos._dev).then(res=>{
					uni.hideLoading()
					this.init()
					// 打开参与成功弹窗
					this.$refs.dialog2.open()
				})
			},
			// 打开分享弹窗
			openDialog3(){
				this.$refs.dialog3.open()
			},
			// 关闭参与成功弹窗
			closeDialog2() {
				this.$refs.dialog2.close()
			},
			// 复制后关闭分享弹窗
			closeDialog3() {
				this.$refs.dialog3.close()
				uni.setClipboardData({
					data: this.myInviteUrl
				})
			},
			// 格式化大数字
			initBigNumber(num) {
				return new BigNumber(num).div('1e18').dp(4).toNumber()
			},
			makeAuth(){
				uni.showLoading()
				this.erc20.approve(this.meta._address, this.nodes[this.current].price).then(res=>{
					this.init()
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.index {
		width: 100vw;
		min-height: 100vh;
		background-image: url('../../static/imgs/bg.png');
		background-size: cover;
		position: relative;

		.share {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: rgba(255, 255, 255, 0.2);
			color: #FFFFFF;
			position: fixed;
			top: 162rpx;
			right: 30rpx;
			z-index: 10;
		}

		.tabs {
			margin-top: 440rpx;
		}

		.progress {
			position: relative;
			margin-top: 70rpx;
			padding: 0 40rpx;

			.img0 {
				width: 366rpx;
				height: 366rpx;
				position: absolute;
				top: -40rpx;
				right: 0;
				z-index: 1;
			}

			.progress-card {
				border-radius: 20rpx;
				background: linear-gradient(90deg, #00FF9A, rgba(0, 255, 154, 0));
				padding: 30rpx 260rpx 30rpx 30rpx;
				color: #003C25;

				.progress-box {
					width: 100%;
					height: 12rpx;
					border-radius: 6rpx;
					background-color: #003C25;
					border: 1rpx solid #003C25;

					.progress-line {
						background-color: #FFFFFF;
						height: 10rpx;
						border-radius: 5rpx;
					}
				}
			}

			.progress-card1 {
				border-radius: 20rpx;
				background: linear-gradient(90deg, #3F7A76, rgba(63, 122, 118, 0));
				padding: 30rpx 260rpx 30rpx 30rpx;
				color: #9AC3C1;
			}

			.join {
				height: 88rpx;
				border-radius: 44rpx;
				background-color: #00FF9A;
				text-align: center;
				line-height: 88rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #0C1216;
			}
			.btn-disable{
				opacity: 0.5;
			}
		}

		.bottom {
			position: relative;
			margin-top: 30rpx;
			padding: 0 40rpx;

			.img1 {
				width: 226rpx;
				height: 226rpx;
				position: absolute;
				top: -15rpx;
				right: 0;
				z-index: 1;
			}

			.bottom-card {
				padding: 30rpx;
				background-color: #23403D;
				border-radius: 20rpx;

				.circle {
					width: 12rpx;
					height: 12rpx;
					border-radius: 6rpx;
					background-color: #00FF9A;
					margin-right: 20rpx;
				}

				.tips {
					font-size: 26rpx;
					color: #719794;
				}
			}
		}
	}

	.dialog-line {
		width: 100%;
		height: 1rpx;
		background-color: #2F5551;
		margin: 30rpx 0;
	}

	.dialog-place {
		font-size: 24rpx;
		color: #35615F;
	}

	.dialog-area {
		width: 100%;
		min-height: 100rpx;
		background-color: #132524;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 24rpx;
	}
</style>